<!--树形数据模板-->
<template>
    <div class="app-container">
        <vxe-toolbar ref="xToolbar" custom>
            <template #buttons>
                <el-button
                        v-if="checkPermission(['sys:${authInfo}:add'])"
                        type="primary"
                        size="medium"
                        icon="el-icon-plus"
                        @click="edit(0)"
                >新增
                </el-button>
            </template>
        </vxe-toolbar>
        <!--table-->
        <vxe-table
                border
                resizable
                :tree-config="{children: 'children', accordion: true}"
                :data="tableData"
        >
            <vxe-table-column field="title" title="名称" tree-node></vxe-table-column>
            <vxe-table-column field="permission" title="权限"></vxe-table-column>
            <vxe-table-column field="sort" title="排序"></vxe-table-column>
            <vxe-table-column field="updateTime" title="更新时间"></vxe-table-column>
            <vxe-table-column title="操作" fixed="right" width="300">
                <template #default="{row}">
                    <el-button
                            v-if="checkPermission(['sys:${authInfo}:add']) && row.level < 2"
                            type="primary"
                            size="small"
                            icon="el-icon-edit"
                            @click="edit(3,row.id)"
                    >新增
                    </el-button>
                    <el-button
                            v-if="checkPermission(['sys:${authInfo}:update'])"
                            type="success"
                            size="small"
                            icon="el-icon-edit"
                            @click="edit(1,row.id)"
                    >修改
                    </el-button>
                    <el-button
                            v-if="checkPermission(['sys:${authInfo}:delete'])"
                            type="danger"
                            size="small"
                            icon="el-icon-close"
                            @click="del(row.id)"
                    >删除
                    </el-button>
                </template>
            </vxe-table-column>
        </vxe-table>
        <!--edit-->
        <el-dialog title="编辑" :visible.sync="dialogVisible">
            <el-form :model="form" label-width="80px">
                <#list columnInfos as columnInfo>
                    <#if columnInfo.columnName == "sort">
                        <el-form-item label="${columnInfo.columnComment}">
                            <el-slider v-model="form.${columnInfo.columnName}" placeholder="${columnInfo.columnName}" />
                        </el-form-item>
                    <#elseif columnInfo.columnName != "id" &&  columnInfo.columnName != "createTime" && columnInfo.columnName != "updateTime" && columnInfo.columnName != "delFlag" && columnInfo.columnName != "level" >
                        <el-form-item label="${columnInfo.columnComment}">
                            <el-input v-model="form.${columnInfo.columnName}" placeholder="${columnInfo.columnName}" />
                        </el-form-item>
                    </#if>
                </#list>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button
                        v-if="checkPermission(['sys:${authInfo}:add','sys:${authInfo}:update'])"
                        type="primary"
                        @click="edit(2)"
                >确 定
                </el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
    import checkPermission from '@/utils/permission' // 权限判断函数
    import {
        add${uppercaseName},
        del${uppercaseName},
        update${uppercaseName},
        get${uppercaseName},
        tree${uppercaseName}
    } from '@/api/${apiPath}'

    export default {
        data() {
            return {
                tableData: [],
                dialogVisible: false,
                form: {
                    id: -1,
                    <#list columnInfos as columnInfo>
                    <#if columnInfo.columnName == "parentId" ||  columnInfo.columnName == "sort" ||  columnInfo.columnName == "level">
                    ${columnInfo.columnName}: 0,
                    <#elseif columnInfo.columnName != "id" &&  columnInfo.columnName != "createTime" && columnInfo.columnName != "updateTime" && columnInfo.columnName != "delFlag" >
                    ${columnInfo.columnName}: '',
                    </#if>
                    </#list>
                },
                num: { a: '', b: 0 }
            }
        },
        created() {
            this.tree()
        },
        methods: {
            add(data) {
                add${uppercaseName}(data).then(response => {
                    this.$message({ type: 'success', message: response.msg })
                    this.tree()
                })
            },
            del(id) {
                this.$confirm('是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    del${uppercaseName}(id).then(response => {
                        this.$message({ type: 'success', message: response.msg })
                        this.tree()
                    })
                }).catch(() => {
                    this.$message({ type: 'info', message: '已取消删除' })
                })
            },
            update(data) {
                update${uppercaseName}(data).then(response => {
                    this.$message({ type: 'success', message: response.msg })
                    this.tree()
                })
            },
            get(id) {
                get${uppercaseName}(id).then(response => {
                    this.form = response.data
                })
            },
            tree() {
                tree${uppercaseName}().then(response => {
                    if (response.code === 0) {
                        this.tableData = response.data
                    }
                })
            },
            edit(type, id) {
                // 0 增加 1 修改  2 保存增加 3 增加子节点
                if (type === 0) {
                    this.form.id = -1
                     this.form.parentId = 0
                    // this.form.title = null
                    // this.form.permission = null
                    this.form.sort = 0

                    this.dialogVisible = true
                } else if (type === 1) {
                    this.get(id)
                    this.dialogVisible = true
                } else if (type === 2) {
                    if (this.form.id > 0) {
                        this.update(this.form)
                    } else {
                        this.add(this.form)
                    }
                    this.dialogVisible = false
                } else if (type === 3) {
                    this.form.id = -1
                    this.form.parentId = id
                    // this.form.title = null
                    // this.form.permission = null
                    this.form.sort = 0
                    this.dialogVisible = true
                }
            },
            checkPermission // 验证权限
        }
    }
</script>
